<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录页面</title>
	
	<!-- 
	 <link rel="stylesheet" type="text/css" href="http://fonts.useso.com/css?family=RobotoDraft:300,500"/>
	 -->
	
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/public/css/default.css?v=2"/>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/public/css/account.css?v=2" />
	
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
	
	<style>
		.title_pane
		{
			position: absolute;
			left: 15%;
			top: 50px;
			padding:20px;
			display:none;
			box-shadow: 0 9px 10px 6px rgba(0,0,0,0.3);
			opacity:0.9;
			border-radius: 10%;
			width: 500px;
			height: 180px;
			background-color: #fff;
		}
		.title_pane h1{
			color: #24ABF1;
			font-size: 75px;
			font-family: 微软雅黑;
			opacity:1;
			border-radius: 10%;
		}
	
	</style>
	
</head>
<body>
	<div class="htmleaf-container">
	<!-- 
		<div id="font_div">
			<h1>欢迎来到电子书商场后台管理</h1>
		</div>
	 -->
		<div class="title_pane">
			<h1>
				大鸟记账
			</h1>
			<h2>
				 后台管理系统
			</h2>
		</div>
		
		<div class="login" id="login">
			<i ripple>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path fill="#C7C7C7" d="m12,2c-5.52,0-10,4.48-10,10s4.48,10,10,10,10-4.48,10-10-4.48-10-10-10zm1,17h-2v-2h2zm2.07-7.75-0.9,0.92c-0.411277,0.329613-0.918558,0.542566-1.20218,1.03749-0.08045,0.14038-0.189078,0.293598-0.187645,0.470854,0.02236,2.76567,0.03004-0.166108,0.07573,1.85002l-1.80787,0.04803-0.04803-1.0764c-0.02822-0.632307-0.377947-1.42259,1.17-2.83l1.24-1.26c0.37-0.36,0.59-0.86,0.59-1.41,0-1.1-0.9-2-2-2s-2,0.9-2,2h-2c0-2.21,1.79-4,4-4s4,1.79,4,4c0,0.88-0.36,1.68-0.930005,2.25z"/>
				</svg>
			</i>
			<div class="photo">
			</div>
			<span style="opacity:1;">请登录你的账号</span>
			<form action="" id="login-form">
				<!-- 账号输入模块 -->
				<div id="u" class="form-group" style="opacity:1;">
				  <input id="username" spellcheck=false class="form-control" name="username" type="text" size="18" alt="login" required="">
				  <span class="form-highlight"></span>
				  <span class="form-bar"></span>
				  <label for="username" class="float-label">用户名</label>
				  <erroru>
				  	用户名不能为空
				  	<i>		
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						    <path d="M0 0h24v24h-24z" fill="none"/>
						    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
						</svg>
				  	</i>
				  </erroru>
				</div>
				<!-- 密码输入模块 -->
				<div id="p" class="form-group">
				  <input id="password" class="form-control" spellcheck=false name="password" type="password" size="18" alt="login" required="">
				  <span class="form-highlight"></span>
				  <span class="form-bar"></span>
				  <label for="password" class="float-label">密码</label>
				  <errorp>
				  	密码不能为空
				  	<i>		
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						    <path d="M0 0h24v24h-24z" fill="none"/>
						    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
						</svg>
				  	</i>
				  </errorp>
				</div>
				<!-- 验证码输入模块 -->
				<div id="v" class="form-group">
				  <input id="vCode" class="form-control" spellcheck=false name="vCode" type="text" size="18" alt="login" required="">
				  <span class="form-highlight"></span>
				  <span class="form-bar"></span>
				  <label for="vCode" class="float-label">验证码</label>
				  <errorp>
				  	验证码有误，请重新输入
				  	<i>		
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						    <path d="M0 0h24v24h-24z" fill="none"/>
						    <path d="M1 21h22l-11-19-11 19zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
						</svg>
				  	</i>
				  </errorp>
				</div>
				<!-- 验证码图片 -->
				<div id="code" class="form-control-vcode">
					<!-- 验证码图片 -->
				   <a href="javascript:changeCode()">
				   <img src="${pageContext.request.contextPath }/vcode.do" id="autoCode" width="180px" height="70px" /></a>
				</div>
				<!-- 登录按钮提交模块 -->
				<div class="form-group-buttun">
				<input type="checkbox" id="rem">
				<label for="rem">保存登录</label>
				<button id="submit" type="submit" ripple onclick="javascript:loginClick()">登陆</button>
				</div>
			</form>
		</div>
	</div>
	
	<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath }/public/js/tooltips.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath }/public/js/UrlParam.js" type="text/javascript"></script>
	<script>
	
	//登录按钮判断事件返回值
	var isValidateLogin={
		one:false,//账号
		twe:false,//密码
		three:false//验证码
	};
	
	$(document).ready(function () {
		
		$(".title_pane").fadeIn("9000");
		
	    $(function () {
	        var animationLibrary = 'animate';
	        $.easing.easeOutQuart = function (x, t, b, c, d) {
	            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
	        };
	        $('[ripple]:not([disabled],.disabled)').on('mousedown', function (e) {
	            var button = $(this);
	            var touch = $('<touch><touch/>');
	            var size = button.outerWidth() * 1.8;
	            var complete = false;
	            $(document).on('mouseup', function () {
	                var a = { 'opacity': '0' };
	                if (complete === true) {
	                    size = size * 1.33;
	                    $.extend(a, {
	                        'height': size + 'px',
	                        'width': size + 'px',
	                        'margin-top': -size / 2 + 'px',
	                        'margin-left': -size / 2 + 'px'
	                    });
	                }
	                touch[animationLibrary](a, {
	                    duration: 500,
	                    complete: function () {
	                        touch.remove();
	                    },
	                    easing: 'swing'
	                });
	            });
	            touch.addClass('touch').css({
	                'position': 'absolute',
	                'top': e.pageY - button.offset().top + 'px',
	                'left': e.pageX - button.offset().left + 'px',
	                'width': '0',
	                'height': '0'
	            });
	            button.get(0).appendChild(touch.get(0));
	            touch[animationLibrary]({
	                'height': size + 'px',
	                'width': size + 'px',
	                'margin-top': -size / 2 + 'px',
	                'margin-left': -size / 2 + 'px'
	            }, {
	                queue: false,
	                duration: 500,
	                'easing': 'easeOutQuart',
	                'complete': function () {
	                    complete = true;
	                }
	            });
	        });
	    });
	    
	    //点击验证码输入框弹出验证码图片动画（滑动动画）
		$("#vCode").click(function(){   
			$("#code").slideDown("2000");
		})	
		//点击验证码输入框弹出验证码图片动画（滑动动画）
		
		$("#login").slideDown("8000");
		
		
	    var username = $('#username'), password = $('#password'), vCode = $('#vCode')
	    erroru = $('erroru'), errorp = $('errorp'), submit = $('#submit'), 
	    udiv = $('#u'), pdiv = $('#p'), vdiv = $('#v');
	    //用户名输入判断事件
	    username.blur(function () {
	        if (username.val() == '') {
	            udiv.attr('errr', '');
	        } else {
	            udiv.removeAttr('errr');
	            isValidateLogin.one=true;
	        }
	    });
	  //密码输入判断事件
	    password.blur(function () {
	        if (password.val() == '') {
	            pdiv.attr('errr', '');
	        } else {
	            pdiv.removeAttr('errr');
	            isValidateLogin.twe=true;
	        }
	    });
	  //验证码输入判断事件
	    vCode.blur(function () {
	    	
	        if (vCode.val() == '') {
	            vdiv.attr('errr', '');//不为空
	        } else {
	        	//判断输入值与生成验证码图片是否一致
	            var that=this;
        		var url="${pageContext.request.contextPath }/manager/verify.do";
        		$.post(
        				url,
        				{authCode:vCode.val()},
        				function(fig){
        					console.log(fig);
        					if (fig=="0") {//不正确
        						vdiv.attr('errr', '');
    		    				isValidateLogin.three=false;
    		    				//vCode.attr("src","${pageContext.request.contextPath }/verifyCode?uuid="+new Date().getTime());
    						}else{//正确
    							vdiv.removeAttr('errr');
    							//$(that).popover("destroy");
    							isValidateLogin.three=true;
    						}
        				}
        		);
	        }
	    });
	  	//按钮点击判断时间
	    submit.on('click', function (event) {
	        event.preventDefault();
	        //用户名点击提交判断事件
	        if (username.val() == '') {
	            udiv.attr('errr', '');
	        } else {
	            udiv.removeAttr('errr');
	            isValidateLogin.one=true;
	        }
	        //密码点击提交判断事件
	        if (password.val() == '') {
	            pdiv.attr('errr', '');
	        } else {
	            pdiv.removeAttr('errr');
	            isValidateLogin.twe=true;
	        }
	      	//验证码点击提交判断事件
	        if (vCode.val() == '') {
	            vdiv.attr('errr', '');//不为空
	        } else {
	            //判断输入值与生成验证码图片是否一致
	            var that=this;
        		var url="${pageContext.request.contextPath }/manager/verify.do";
        		$.post(
        				url,
        				{authCode:vCode.val()},
        				function(fig){
        					console.log(fig);
        					if (fig=="0") {//不正确
        						vdiv.attr('errr', '');
    		    				isValidateLogin.three=false;
    		    				//输入失败点击提交后验证码重新刷新
    		    				$("#autoCode").attr("src","${pageContext.request.contextPath }/vcode.do?uuid="+new Date().getTime());
    						}else{//正确
    							vdiv.removeAttr('errr');
    							//$(that).popover("destroy");
    							isValidateLogin.three=true;
    						}
        				}
        		);
	        }
	    });
	  	
	});
	
	function loginClick(){
    	if(isValidateLogin.one && isValidateLogin.twe && isValidateLogin.three){
    		var url="${pageContext.request.contextPath }/manager/login.do";
    		var info={
   				username:$("#username").val(),
   				password:$("#password").val(),
   				rememberme:$("#rem").prop("checked"),
    				
    		};
	    	$.post(
					url,
					info,
					function(str){
						console.log(str);
						if (str=="0") {//不正确
							show_err_msg("");
						}else{//正确
							//判断是否要存进cookie
							//if($("#rem").prop("checked")){ 
							//	setCookie("COOKIE_ID",str.user_id,7);//保留登录7天
							//}
							//show_msg("登录成功！欢迎回来"+$("#username").val()+"先生","index");
							show_msg("登录成功！","index");
							location.href="${pageContext.request.contextPath}/index.do";
						}
					}
			);
    	}
    	
    };
	
	//验证码点击刷新
	function changeCode(){
    	$("#autoCode").attr("src","${pageContext.request.contextPath }/vcode.do?uuid="+new Date().getTime());
    }
	
	</script>
</body>
</html>